<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    @close="close"
    destroy-on-close
    width="75%"
  >
    <el-timeline class="timeline" v-if="activities.length > 0">
      <el-timeline-item
        class="lineitem"
        :class="
          activity.auditResult == 2
            ? 'activeRed'
            : activity.timeOutFlag == 1
            ? 'activeYellow'
            : 'active'
        "
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.operationTime"
      >
        <template #dot>
          <el-popover
            placement="top"
            :width="200"
            trigger="hover"
            offset="10"
            :content="
              activity.auditAdvice
                ? '审核意见：' + activity.auditAdvice
                : '审核意见：无'
            "
          >
            <template #reference>
              <div
                style="
                  cursor: pointer;
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background-color: #1890ff;
                "
                :style="{
                  'background-color':
                    activity.auditResult == 2
                      ? 'red'
                      : activity.timeOutFlag == 1
                      ? 'orange'
                      : '#165dff',
                }"
              ></div>
            </template>
          </el-popover>
        </template>

        <span style="display: flex; flex-direction: column">
          <span
            style="margin: 10px 0; font-size: 16px"
            :class="
              activity.nodeType == 2 && activity.auditResult == 2
                ? 'activeRed'
                : activity.timeOutFlag == 1
                ? 'activeYellow'
                : 'active'
            "
          >
            {{
              activity.nodeType == 1
                ? "已提交"
                : activity.nodeType == 3
                ? "已完成"
                : activity.nodeType == 2 && activity.auditResult == 0
                ? "待审核"
                : activity.nodeType == 2 && activity.auditResult == 2
                ? "审核不通过"
                : "审核通过"
            }}
            <span v-if="activity.timeOutFlag == 1">(超时)</span>
          </span>
          <span style="margin: 10px 0; font-size: 16px">
            {{ activity.nodeMsg
            }}{{
              activity.operationRoleName
                ? " - " + activity.operationRoleName
                : ""
            }}
          </span>
          <span style="color: #8c8c8c; font-size: 14px">
            {{ activity.operationRoleName }}

            {{
              activity.operationUserName
                ? " - " + activity.operationUserName
                : ""
            }}
          </span>
        </span>
      </el-timeline-item>
    </el-timeline>
    <el-empty description="暂无数据" v-else />
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { pageList } from "@/api/flowPath/index";
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  title: {
    type: String,
  },
  businessId: {
    type: Number,
  },
});

watch(
  () => props.businessId,
  () => {
    if (props.businessId) {
      getFlow();
    }
  }
);
const activities = ref([]);
const isPopoverVisible = ref(false);
const currentTimelineItem = ref(null);
const emit = defineEmits(["dialogClose"]);
const dialogFormVisible = computed(() => props.dialogVisible);

const close = () => {
  emit("dialogClose");
};
// 查询流程节点
function getFlow() {
  pageList(props.businessId).then((res) => {
    console.log(res);
    activities.value = res.data;
  });
}
</script>

<style lang="scss" scoped>
.timeline {
  display: flex;
  width: 100%;
  height: 180px;
  margin: 8px auto 32px;
  overflow-x: auto;
  overflow-y: hidden;
  .lineitem {
    transform: translateX(30%);
    // width: 25%;
    width: 180px;
    flex-shrink: 0; /* 防止缩小 */
  }
}
:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
.active {
  :deep(.el-timeline-item__node) {
    background-color: #165dff;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    border-color: #165dff;
  }
}
.activeRed {
  color: red;
  :deep(.el-timeline-item__node) {
    background-color: red;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    border-color: #165dff;
  }
}
.activeYellow {
  color: orange;
  :deep(.el-timeline-item__node) {
    background-color: orange;
    // background-color: $login_word;
  }
  :deep(.el-timeline-item__tail) {
    // border-color: $login_word;
    border-color: #165dff;
  }
}
// 有active样式的下一个li
// .active + li {
//   :deep(.el-timeline-item__node) {
//     background-color: #165dff;
//   }
// }
</style>